import React from 'react';
import { Empty, Button, Card } from 'antd';
import {
  InboxOutlined,
  FileSearchOutlined,
  UserOutlined,
  ShoppingCartOutlined,
  DatabaseOutlined,
  PlusOutlined,
  ReloadOutlined
} from '@ant-design/icons';

// 空状态类型配置
const EMPTY_TYPES = {
  data: {
    icon: <InboxOutlined />,
    description: '暂无数据',
    image: Empty.PRESENTED_IMAGE_SIMPLE
  },
  search: {
    icon: <FileSearchOutlined />,
    description: '没有找到相关内容',
    image: Empty.PRESENTED_IMAGE_SIMPLE
  },
  users: {
    icon: <UserOutlined />,
    description: '暂无用户数据',
    image: Empty.PRESENTED_IMAGE_SIMPLE
  },
  orders: {
    icon: <ShoppingCartOutlined />,
    description: '暂无订单数据',
    image: Empty.PRESENTED_IMAGE_SIMPLE
  },
  menu: {
    icon: <DatabaseOutlined />,
    description: '暂无菜品数据',
    image: Empty.PRESENTED_IMAGE_SIMPLE
  },
  coupons: {
    icon: <DatabaseOutlined />,
    description: '暂无优惠券数据',
    image: Empty.PRESENTED_IMAGE_SIMPLE
  },
  reports: {
    icon: <FileSearchOutlined />,
    description: '暂无报表数据',
    image: Empty.PRESENTED_IMAGE_SIMPLE
  },
  reviews: {
    icon: <DatabaseOutlined />,
    description: '暂无评价数据',
    image: Empty.PRESENTED_IMAGE_SIMPLE
  }
};

// 基础空状态组件
export const EmptyState = ({ 
  type = 'data', 
  description, 
  image, 
  actions = [], 
  style = {} 
}) => {
  const config = EMPTY_TYPES[type] || EMPTY_TYPES.data;
  
  return (
    <div style={{
      padding: '40px 20px',
      textAlign: 'center',
      ...style
    }}>
      <Empty
        image={image || config.image}
        description={description || config.description}
      >
        {actions.length > 0 && (
          <div style={{ marginTop: '16px' }}>
            {actions.map((action, index) => (
              <React.Fragment key={index}>
                {action}
                {index < actions.length - 1 && <span style={{ margin: '0 8px' }} />}
              </React.Fragment>
            ))}
          </div>
        )}
      </Empty>
    </div>
  );
};

// 带卡片的空状态组件
export const CardEmptyState = ({ 
  type = 'data', 
  description, 
  actions = [], 
  cardProps = {} 
}) => {
  return (
    <Card {...cardProps}>
      <EmptyState 
        type={type} 
        description={description} 
        actions={actions}
        style={{ padding: '20px' }}
      />
    </Card>
  );
};

// 搜索结果空状态
export const SearchEmptyState = ({ 
  keyword, 
  onClear, 
  onRetry 
}) => {
  const actions = [];
  
  if (onClear) {
    actions.push(
      <Button onClick={onClear}>
        清除搜索条件
      </Button>
    );
  }
  
  if (onRetry) {
    actions.push(
      <Button type="primary" icon={<ReloadOutlined />} onClick={onRetry}>
        重新搜索
      </Button>
    );
  }
  
  return (
    <EmptyState
      type="search"
      description={keyword ? `没有找到包含 "${keyword}" 的结果` : '没有找到相关内容'}
      actions={actions}
    />
  );
};

// 数据列表空状态
export const ListEmptyState = ({ 
  type = 'data', 
  description, 
  onCreate, 
  onRefresh,
  createText = '添加数据',
  refreshText = '刷新'
}) => {
  const actions = [];
  
  if (onCreate) {
    actions.push(
      <Button type="primary" icon={<PlusOutlined />} onClick={onCreate}>
        {createText}
      </Button>
    );
  }
  
  if (onRefresh) {
    actions.push(
      <Button icon={<ReloadOutlined />} onClick={onRefresh}>
        {refreshText}
      </Button>
    );
  }
  
  return (
    <EmptyState
      type={type}
      description={description}
      actions={actions}
    />
  );
};

// 错误状态组件
export const ErrorState = ({ 
  error, 
  onRetry, 
  description = '加载失败，请重试' 
}) => {
  return (
    <div style={{
      padding: '40px 20px',
      textAlign: 'center'
    }}>
      <Empty
        image={Empty.PRESENTED_IMAGE_SIMPLE}
        description={error?.message || description}
      >
        {onRetry && (
          <Button type="primary" icon={<ReloadOutlined />} onClick={onRetry}>
            重试
          </Button>
        )}
      </Empty>
    </div>
  );
};

// 默认导出基础空状态组件
export default EmptyState;